<template>
  <view>
    <!-- 头部 -->
    <yHeader
      :current="3"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
    ></yHeader>
    <!-- PC -->
    <view v-if="screenWidth > 480" class="__inner mb-5 cont">
      <view class="contentrow">
        <view class="label-recommend"> 热门推荐 </view>
        <view class="sub-row">
          <view
            v-for="(item, index) in category"
            @click="SwitchVariety(index, item.Category_SerialNumber)"
            :key="index"
            :class="Variety == index ? 'sub text-' + ThemeColors : 'sub'"
            style="cursor: pointer"
            >{{ item.Category_Name }}</view
          >
        </view>
      </view>
      <view class="content">
        <yTable
          :loading="loading"
          @row-click="handleDetail"
          @limitval="limitval"
          @pageval="pageval"
          :page="form.page"
          :limit="form.limit"
          :total="total"
          :tableData="tableData"
          style="width: 1800rpx"
        >
          <el-table-column align="center" label="采购品种">
            <template v-slot="{ row }">
              <view
                class="w-100 text-ellipsis flex align-center justify-center"
                :title="row.Category_Name"
              >
                <text>{{ row.Category_Name }}</text>
              </view>
            </template>
          </el-table-column>
		  <el-table-column align="center" label="采购品名" width="180">
		    <template v-slot="{ row }">
		      <view
		        class="w-100 text-ellipsis flex align-center justify-center"
		        :title="row.Article_Name"
		      >
		        <text>{{ row.Article_Name }}</text>
		      </view>
		    </template>
		  </el-table-column>
          <el-table-column
            align="center"
            prop="Total_Quantity"
            label="采购数量"
            width="180"
          >
            <template v-slot="{ row }">
              <view
                class="w-100 text-ellipsis"
                :title="row.Total_Quantity + '/' + row.Unit"
              >
                <text>{{ row.Total_Quantity + "/" + row.Unit }}</text>
              </view>
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属企业">
            <template v-slot="{ row }">
              <view class="w-100 text-ellipsis" :title="row.Enterprise_Name">
                <text>{{ row.Enterprise_Name }}</text>
              </view>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布人">
            <template v-slot="{ row }">
              <view class="w-100 text-ellipsis" :title="row.Contacts">
                <text>{{ row.Contacts }}</text>
              </view>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="认证情况">
            <template v-slot="{ row }">
              <image
                style="width: 40rpx; height: 40rpx"
                src="../../static/icon/order-success.png"
                mode=""
              ></image>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="address" :label="''">
            <template v-slot="{ row }">
              <text :class="'text-' + ThemeColors">查看详情</text>
            </template>
          </el-table-column>
        </yTable>
        <view class="charts-box mt-5">
          <text class="title">近7天热门采购榜</text>
          <qiun-data-charts type="word" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
    <!-- 移动端 -->
    <view v-else-if="screenWidth <= 480" class="mb-5 bg-grey">
      <view
        class="bg-white flex w-100 border-top border-grey"
        style="box-sizing: border-box; height: 80rpx"
      >
        <view
          class="flex justify-center align-center border-right border-grey"
          style="position: relative; box-sizing: border-box; width: 50%"
        >
          <text class="font"
            >类别<i class="dropdown-arrow icon-triangle-down"></i
          ></text>
        </view>
        <view
          class="flex justify-center align-center"
          style="position: relative; width: 50%"
        >
          <text class="font"
            >地区<i class="dropdown-arrow icon-triangle-down"></i
          ></text>
        </view>
      </view>
      <!-- 列表 -->
      <view class="flex flex-column align-center my-2 pb-2" style="width: 100%">
        <view
          @click="handleDetail(item)"
          v-for="(item, index) in tableData"
          :key="item.Group_Seek_Purchase_SerialNumber"
          class="py-3 mb-2 rounded-lg bg-white"
          style="width: 95%; position: relative"
        >
          <view class="mx-3" style="position: relative">
            <text class="font">{{ item.Article_Name }}</text>
            <text
              class="font-sm text-muted"
              style="position: absolute; right: 0"
              >45分钟前</text
            >
          </view>
          <view class="mx-3 mt-2 mb-4">
            <text class="font mr-2" :class="'text-' + ThemeColors"
              >{{ item.Residue_Quantity }}{{ item.Unit }}</text
            >
            <!-- <text class="font mx-2 px-1 text-white rounded" :class="'bg-'+ThemeColors">每周采购</text> -->
            <text
              class="font px-1 text-white rounded"
              :class="'bg-' + ThemeColors"
              >认证</text
            >
          </view>
          <view class="mx-3 mb-2">
            <!-- <text class="font text-muted">期望货源地：全国</text> -->
            <text class="font text-muted">联系人：{{ item.Contacts }}</text>
          </view>
          <view class="mx-3">
            <text class="font text-muted"
              >所属企业：{{ item.Enterprise_Name }}</text
            >
            <!-- <text class="font text-muted">收货地：湖南省常德市</text> -->
          </view>
          <view
            class="border flex justify-center align-center rounded-lg"
            :class="'border-' + ThemeColors"
            style="
              width: 120rpx;
              height: 50rpx;
              position: absolute;
              right: 30rpx;
              bottom: 30rpx;
            "
          >
            <text class="font-sm" :class="'text-' + ThemeColors">去联系</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter
      Show
      v-if="screenWidth > 480"
      :screenWidth="screenWidth"
      :bg="'bg-white'"
    ></yFooter>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import yTable from "@/components/yTable.vue";
import {
  GroupSeekProcureAll,
  GroupSeekProcureAllAction,
} from "../../api/group.js";
import { GoodsFileInquiry } from "@/api/global.js";
import { Message } from "element-ui";
import { getGroupSalesRanking } from "@/api/information.js";
export default {
  components: {
    yHeader,
    yFooter,
    yTable,
  },
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      Variety: 0,
      form: {
        Article_Name: "",
        Category_SerialNumber: "",
        Enterprise_Info_SerialNumber: "",
        Type: "0",
        page: 1, //页数
        limit: 10, //每页数据条数
      },
      total: 0,
      loading: true,
      category: [
        {
          Category_SerialNumber: "",
          Category_Name: "全部",
        },
      ],
      tableData: [],
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: undefined,
        enableScroll: false,
        extra: {
          word: {
            type: "normal",
            autoColors: false,
          },
        },
      },
      chartData: {},
      hotspot: [],
    };
  },
  onLoad() {
    window.addEventListener("scroll", this.handleScroll);
    this.getData(this.form);
    this.getList();
  },
  methods: {
    async getServerData() {
      //模拟从服务器获取数据时的延时
      const res = await getGroupSalesRanking({
        data: {
          Type: "1",
        },
      });
	  let arr = ['50','35','30','20','15','10']
	  res.Data.forEach((item,i)=>{
	  	if(arr[i]==void 0){
	  		item.textSize = arr[arr.length-1]
	  	}else{
	  		item.textSize = arr[i]
	  	}
	  })
      console.log(res);
      this.hotspot = res.Data;
        let res1 = {
          series: this.hotspot,
        };
        this.chartData = JSON.parse(JSON.stringify(res1))
    },

    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 获取页面的可视高度
      const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 获取页面的总高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 判断是否滑动到底部
      if (scrollTop + clientHeight >= scrollHeight && this.screenWidth <= 480) {
        // 执行你想要执行的函数
        if (this.total > this.tableData.length) {
          this.getData_m(this.form);
        }
      }
    },
    async getData(data) {
      //分页查询所有采购交易
      const res = await GroupSeekProcureAllAction({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.removeStorageSync("loginInfo");
        const res = await GroupSeekProcureAll({
          data,
        });
        if (res.Status == "success") {
          this.tableData = res.tableData;
          this.total = Number(res.limit);
          this.loading = false;
        }
      } else if (res.Status == "success") {
		  console.log(res.tableData)
        this.tableData = res.tableData;
        this.total = Number(res.limit);
        this.loading = false;
      }
    },
    async getData_m(data) {
      //移动端适配
      this.form.page++;
      const res = await GroupSeekProcureAllAction({
        data: this.form,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.removeStorageSync("loginInfo");
        const res = await GroupSeekProcureAll({
          data: this.form,
        });
        if (res.Status == "success") {
          this.tableData.push(...res.tableData);
        }
      } else if (res.Status == "success") {
        this.tableData.push(...res.tableData);
      }
    },
    async getList() {
      //类别
      const res = await GoodsFileInquiry({
        data: {
          Data: "category",
        },
      });
      this.category.push(...res);
    },
    SwitchVariety(i, e) {
      //切换品种
      if (this.form.Category_SerialNumber == e) {
        //重复点击不允许调接口
        return;
      }
      this.Variety = i;
      this.form.Category_SerialNumber = e;
      this.form.page = 1;
      this.getData(this.form);
    },
    pageval(e) {
      this.form.page = e;
      this.getData(this.form);
    },
    limitval(e) {
      this.form.page = 1;
      this.form.limit = e;
      this.getData(this.form);
    },
    handleDetail(row) {
      uni.navigateTo({
        url:
          "/pages/detail/purchase-detail?Group_Seek_Purchase_SerialNumber=" +
          row.Group_Seek_Purchase_SerialNumber+'&Enterprise_Info_SerialNumber='+row.Enterprise_Info_SerialNumber,
      });
    },
  },
  onReady() {
    this.getServerData();
  },
};
</script>

<style lang="scss" scoped>
// .cont {
//   // display: flex;
//   // align-items: center;
//   height: calc(100vh - 468px);
//   min-height: 1500rpx;
//   // border: 1px solid red;
// }
.content {
  display: flex;
  // height: calc(80vh - 102px);
}
.charts-box {
  width: 600rpx;
  // min-height: 1200rpx;
  height: 1000rpx;
  border: 1px solid #f5f5f5;
  // height: 100%;
  text {
    display: inline-block;
    font-weight: bold;
    width: 100%;
    height: 96rpx;
    padding: 46rpx 0;
    display: flex;
    box-sizing: border-box;
    background-color: #f5f5f5;
    justify-content: center;
    align-items: center;
  }
}
.icon-triangle-down {
  width: 0;
  height: 0;
  margin-left: 5px;
  border: 4px solid #535b62;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom: none;
  /*兼容IE6及其以下*/
  _border-right-color: #fff;
  _border-right-color: #fff;
  position: absolute;
  top: 20px;
}
.drop-down:hover .icon-triangle-down {
  border-top: none;
  border-bottom-width: 4px;
  border-bottom-style: solid;
}

.contentrow {
  border: 1px solid #ddd;
  border-top: 0;
}

.label-recommend {
  font-size: 28rpx;
  color: #45b035;
  padding-left: 40rpx;
  border-bottom: 1px dashed #efefef;
  line-height: 100rpx;
}

.sub-row {
  display: flex;
  padding-left: 20rpx;
  border-bottom: 1px dashed #efefef;
  font-size: 28rpx;
  letter-spacing: 0.7px;
  position: relative;
  height: 100rpx;
  overflow-y: hidden;
}

.sub {
  transition: all 0.5s;
  padding: 20rpx 0;
  margin: 10rpx 20rpx;
  line-height: 42rpx;
}
</style>